<template>
  <div id="main">
    <m-header title='喵喵影院'></m-header>
    <div id="content">
			<div class="cinema_menu">
				<router-link tag="div" to="/cinema/cityfull" class="city_switch">
					全城 <i class="iconfont icon-lower-triangle"></i>
				</router-link>
				<router-link tag="div" to="/cinema/goods" class="brand_swtich">
					品牌 <i class="iconfont icon-lower-triangle"></i>
				</router-link>
				<router-link tag="div" to="/cinema/special" class="feature_switch">
					特色 <i class="iconfont icon-lower-triangle"></i>
				</router-link>
			</div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
		</div>
    <m-tabbar></m-tabbar>
  </div>
</template>

<script>
import MHeader from '@/components/common/Header';
import MTabbar from '@/components/common/Tabbar';

export default {
  components: {
    MHeader,MTabbar
  }

}
</script>

<style scoped>
#content .cinema_menu{ width: 100%; height: 45px; border-bottom:1px solid #e6e6e6; display: flex; justify-content:space-around; align-items:center; background:white;}
.cinema_menu .city_switch.router-link-active{ color: #ef4238; }
.cinema_menu .brand_swtich.router-link-active{ color: #ef4238; }
.cinema_menu .feature_switch.router-link-active{ color: #ef4238; }
</style>
